<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>上传文件到OSS</title>
</head>
<body>
<div class="container">
  <img id="img11" />
  <form>
    <div class="mb-3">
      <label for="file" class="form-label">选择文件</label>
      <input
              type="file"
              class="form-control"
              id="file"
              name="file"
              required
      />
    </div>
    <button type="submit" class="btn btn-primary">上传</button>
  </form>
</div>
<script type="text/javascript">
      const form = document.querySelector("form");
      const fileInput = document.querySelector("#file");
      const img11 = document.querySelector("#img11"); // 获取图片元素
      var configData; // 定义在更广泛的作用域

      form.addEventListener("submit", (event) => {
        event.preventDefault();
        const file = fileInput.files[0];
        const filename = file.name;

        fetch(`/get_post_signature_for_oss_upload?fileName=${filename}`, {
          method: "GET",
        })
          .then((response) => {
            if (!response.ok) {
              throw new Error("获取签名失败");
            }
            return response.json();
          })
          .then((data) => {
            configData = data; // 在这里更新configData
            console.log(data);
            console.log(data.preSignatureUrl);
            const formData = new FormData();
            formData.append("name", data.key.split("/")[1]);
            formData.append("policy", data.policy);
            formData.append("OSSAccessKeyId", data.ossAccessKeyId);
            formData.append("success_action_status", "200");
            formData.append("signature", data.signature);
            formData.append("key", data.key);
            formData.append("file", file);
            return fetch(data.host, { method: "POST", body: formData });
          })
          .then((response) => {
            if (response.ok) {
              console.log("上传成功");
              alert("文件已上传");
              // 上传成功后，更新图片的src属性
              img11.src = configData.preSignatureUrl; // 设置图片的src为预签名URL
              img11.alt = "Uploaded Image"; // 设置图片的alt属性

              // fetch(
              //   `/get_signature_url?fileName=${configData.key.split("/")[1]}`,
              //   { method: "GET" }
              // )
              //   .then((response) => {
              //     if (!response.ok) {
              //       throw new Error("获取预览链接失败");
              //     }
              //     return response.json();
              //   })
              //   .then((xxData) => {
              //     console.log("获取预览链接 xxData", xxData);
              //     img11.src = xxData.preSignatureUrl; // 设置图片的src为预签名URL
              //     img11.alt = "Uploaded Image"; // 设置图片的alt属性
              //   });
            } else {
              console.log("上传失败", response);
              alert("上传失败，请稍后再试");
            }
          })
          .catch((error) => {
            console.error("发生错误:", error);
          });
      });
    </script>
</body>
</html>
